<template>
  <div>
    <Table
      :tableData="tableData" 
      @add="add"
       @edit="edit"
      @addTableData="addTableData"
      @handleDelete="handleDelete"
      @editTableData="editTableData"
      @checkDelete="checkDelete"

    >
    <template #header>
      <TableSelect placeholder="姓名/球队名称"    @handleSearch="handleSearch"
      @handlereset="handleReset" :options="options"
      :props="defineProps"  selectPlaceholder="请选球队"  />
      
    </template>
      <el-table-column prop="id" label="ID" width="55" align="center" />
      <el-table-column prop="name" label="球员姓名" />
      <el-table-column label="球衣号码">
        <template #default="scope"> {{ scope.row.number }} 号</template>
      </el-table-column>
      <el-table-column label="头像(查看大图)" align="center">
        <template #default="scope">
          <el-image
            :src="scope.row.thumb"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[scope.row.thumb]"
            fit="cover"
            class="table-td-thumb"
            :hide-on-click-modal="true"
            :preview-teleported="true"
          />
        </template>
      </el-table-column>
      <el-table-column prop="address" label="所在球队" />
      <el-table-column prop="date" label="出生日期" />
      <el-table-column prop="score" label="生涯总分数(目前)" />
      <el-table-column prop="position" label="球队位置" />
      <template #pagination>
        <el-pagination
          v-model:current-page="query.pageIndex"
          v-model:page-size="query.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
      <template #dialog>
            <el-form :model="form" label-width="120px">
        <el-form-item label="球员姓名">
          <el-input v-model="form.name" />
        </el-form-item>
         <el-form-item label="所在球队">
          <el-input v-model="form.address" />
        </el-form-item>
        <el-form-item label="是否退役" >
          <el-switch
            v-model="form.operate"
            inline-prompt
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
      </el-form>
      </template>
    </Table>

  </div>
</template>

<script setup>
import { Delete, Search, Edit } from "@element-plus/icons-vue";
import { reactive, onMounted, ref, toRefs, computed } from "vue";
import TableSelect from '@/components/TableSelect.vue'
import Table from "@/components/Table.vue";
import Dialog from "@/components/Dialog.vue";
import { getTableData } from "@/api/dataList.js";

let query = reactive({
  address: "",
  name: "",
  pageIndex: 1,
  pageSize: 10,
});

const defineProps =ref({
  label:'label',
    value:'value'
})
const options = [
  {
    value: 0,
    label: "所有球队",
  },
  {
    value: 1,
    label: "洛杉矶湖人",
  },
];

let form = ref({
  name:"",
  date:"",
  score:"",
  address:"",
  position:"",
  operate:true,
})
const showButton = ref(true);
const isVisible = ref(false);
const title = ref("");
const optionsTitle = ref("");
const tableData = ref([]);
const total = ref(0);


const handleNodeClick = () => {};
const moreOperate = (val) => {
  console.log(val, setOption[val]);
  optionsTitle.value = setOption[val].label;
  isVisible.value = true;
};

const cancel = () => {
  isVisible.value = false;
};

onMounted(() => {
  getData(query);
});

// 获取表格数据
const getData = (data) => {
  getTableData(data).then((res) => {
    console.log("接口返回数据为：", res);
    tableData.value = res.data.list;
    total.value = res.data.pageTotal || 50;
  });
};
// 触发搜索按钮
const handleSearch = (selectVal, inputVal) => {
  query.pageIndex = 1;
  query.name = inputVal;
  query.address = selectVal;
  getData(query);
};

// 点击新增按钮
const add = () => {
  title.value = "新增";
  form.value = {}
}

// 点击修改按钮
const edit = (scope,index) => {
  title.value = "修改";
  form.value = {...form.value,...scope}
};

// 修改数据
const editTableData = (val) => {
  tableData.value[val] = {...form.value}
  // 调用修改接口
}

// 删除数据
const handleDelete = (scope,index) => {
tableData.value.splice(index,1)
// 调用删除接口
}

// 新增数据
const addTableData = () => {
tableData.value.push(form.value)
// 调用新增接口
}

// 批量删除
const checkDelete = (data) => {
  data.forEach(item => {
      tableData.value = tableData.value.filter(i => i !==item)
    })
  // 调用批量删除接口
}
   
// 触发重置按钮
const handleReset = (selectVal, inputVal) => {
  query.pageIndex = 1;
  query.name = inputVal;
  query.address = selectVal;
  getData(query);
};

//控制每页输出的数量
const handleSizeChange = (val) => {
  query.pageSize = val;
   getData(query);
  console.log(`${val} items per page`);
};

// 切换页码
const handleCurrentChange = (val) => {
  // 调用接口 根据每页输出的数量和当前页码返回对应的数据
  query.pageIndex = val;
   getData(query);
  console.log(`current page: ${val}`);
};
</script>

<style lang="scss" scoped>
.container:deep(.el-pagination .el-icon) {
  display: inline-block !important;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 180px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
  height: calc(100vh - 320px) !important;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
